<!DOCTYPE html>
<h1>

    <head>
        <meta charset="UTF-8" />
        <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
        <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
        <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css"> -->
        <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="./common.css">
        <title>星城音乐播放器</title>
        <script src="./utils/client.js"></script>
        <script src="./utils/helper.js"></script>
        <script>
            require('electron-connect').client.create()
        </script>
    </head>

    <body>
        <div class="container mt-4" id="app">
            <div class="row d-flex justify-content-between align-items-center px-3">
                <h1 class="d-inline no-select"><img class="xc-logo"
                        src="https://www.xcooo.cn/content/templates/FLY/img/tx/1.jpg" alt="">
                    <span class="xc-play">星城音乐播放器</span>
                </h1>
                <button id="add" type="button" class="btn btn-primary">添加音乐</button>
            </div>
            <div id="lists"></div>
            <!-- <ul class="list-group"> -->
            <!-- 方法一: 使用浮动 -->
            <!-- <li class="list-group-item">
                    <div class="float-left"><i class="fa fa-music mr-3" aria-hidden="true"></i>左边的音乐.mp3</div>
                    <div class="float-right">
                        <i class="fa fa-play mr-4" aria-hidden="true"></i>
                        <i class="fa fa-trash" aria-hidden="true"></i>
                    </div>
                </li> -->
            <!-- 方法二: 使用栅格系统 -->
            <!-- <li class="list-group-item">
                    <div class="row">
                        <div class="col-10"><i class="fa fa-music mr-3" aria-hidden="true"></i>左边的音乐.mp3</div>
                        <div class="col-2">
                            <i class="fa fa-play mr-2" aria-hidden="true"></i>
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </div>
                    </div>
                </li> -->
            <!-- flex布局 -->
            <!-- <li class="list-group-item">
                    <div class="row d-flex justify-content-between align-items-center px-3 py-2">
                        <div><i class="fa fa-music mr-3" aria-hidden="true"></i>左边的音乐.mp3</div>
                        <div>
                            <i class="fa fa-play mr-4" aria-hidden="true"></i>
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </div>
                    </div>
                </li> -->
            <!-- </ul> -->

            <div class="no-select play-music">
                <i id="prev" class="fa fa-backward"></i>
                <i id="play" class="fa fa-play mx-3 big"></i>
                <i id="next" class="fa fa-forward"></i>
            </div>

            <div class="container fixed-bottom pd-4 bg-white mb-2" id="progress-wrap">

            </div>
        </div>

        <script src="./index.js"></script>
    </body>

    </html>